<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM操作</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<h1>jQuery DOM</h1>
		<input type="button" id="button1" name="button1" value="I am a button!"/>
		
		<script type="text/javascript">
			// DOM操作 (获取一个element)
			// 1.javascript写法
			// getElementById获得的是单个值,其他的都是数组？
			// 方法一:getElementById   -->      (在表单中是唯一的)
			// var btn = document.getElementById('button1'); 
			// 方法二:getElementsByName   -->   (在表单中是唯一的)
			// var btns = document.getElementsByName('button1');
			// var btn = btns[0];
			// 方法三:querySelector() css的选择器
			// var btn = document.querySelector('#button1');
			// 
			// if(btn != null){
			// 	btn.addEventListener('click', function(e){
			// 		e = e || window.event;
			// 		var target = e.target || e.srcElement;
			// 		alert(target.value);
			// 	});
			// 	
			// 	
			// 	btn.onclick = function(e){
			// 		if(e != null){
			// 			alert(e.target);
			// 		}
			// 		
			// 		e = e || window.event;
			// 		var target = e.target || e.srcElement;
			// 		alert(target.value);
			// 	}
			// }
			// jQuery写法
			// 1.jQuery('xxx'),$('xxx') --> 工厂函数 (获取元素);jQuery类型的原型对象
			// 		返回的是jQuery对象, ==> 本质是封装了DOM对象的类数组
			//		使用jQuery或者$工厂函数查询id为button1的按钮,封装在jQuery对象力,并可以查看jQuery对象里的结构
			var $btn = $('#button1');
			// console.log($btn);
			//会出现一个 ？类数组. jQuery.fn.init[]
			// 2.使用jQuery的简化版API,为$btn绑定单击事件: 把事件相关的兼容性问题全部包装在jQuery的极简化版API中
			// 方法一:click
			// $btn.click(function(e){
			// 	alert(e);
			// 		
			// 	if(e != null){
			// 		alert(e.target);
			// 	}
			// 	// 将原生的对象封装成jQuery对象
			// 	var $btn = $(e.target);
			// 	console.log($btn);
			// });
			// 方法二:on
			// $btn.on('click', function(e){
			// 	var $btn = $(this);
			// 	console.log($btn);
			// })
			// 方法三:链式反应
			var $btn1 = $('#button1').on('click',function(e){
				var $btn1 = $(this);
				console.log($btn1);
			});
		</script>
	</body>
</html>
